<template>
	<!-- 银行卡列表弹出层 -->
	<view class="popList">
		<u-popup :show="show"
			mode="bottom"
			:closeOnClickOverlay="true"
			:closeable="true"
			:show-scrollbar="false"
			closeIconPos="top-left"
			round="16rpx"
			@close="close2"
			@open="open">
			<view class="content">
				<text class="title">选择到账银行卡</text>

				<scroll-view :scroll-y="true"
					class="scroll-Y"
					@scrolltoupper="upper"
					@scrolltolower="lower"
					@scroll="scroll">


					<view class="list-content">
						<view class="item"
							v-for="(res,index) in listData"
							:key="index"
							@click="switchSelect(res)">

							<view class="item-left">
								<image class="item-left-image"
									:src="icons[res.bankName]"
									mode="aspectFit">
								</image>
								<text class="item-left-text">{{res.bankName}}{{!res.type ? `(${res.accountNo})`:''}}</text>
							</view>

							<view class="item-right">
								<image v-if="!res.type && res.status"
									class="item-right-image"
									src="/static/images/iconGouXuan.png"
									mode="aspectFit">
								</image>

								<uni-icons v-if="res.type"
									type="forward"
									size="40rpx"
									color="#D6D5D5"></uni-icons>

							</view>
						</view>
					</view>

				</scroll-view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => []
			},
			selectCar: {
				type: Object,
				default: () => {}
			},



			//方法
			close: {
				type: Function,
				default: () => {}
			},
			setSelectCar: {
				type: Function,
				default: () => {}
			},
		},
		data() {
			return {
				old: {
					scrollTop: 0
				},

				listData: [{
						id: 1,
						title: '中国银行',
						url: '',
						status: true
					}
				],
				icons:{
					'支付宝':'/static/images/ZFB.png',
					'中国工商银行': '/static/images/iconGongShang.png',
					'中国建设银行':'/static/images/iconJianShe.png',
					'中国农业银行':'/static/images/iconNongYe.png',
					'中国银行': '/static/images/iconZhongGuo.png',
					'交通银行': '/static/imagesiconJiaoTong.png',
					'长沙银行': '/static/images/iconChangSha.png',
					'招商银行': '/static/images/iconZhaoShang.png',
					'中国邮政储蓄银行': '/static/images/iconYouChu.png',
					'兴业银行': '/static/images/iconXingYe.png',
					'上海浦东发展银行': '/static/images/iconPuFa.png',
					'中信银行': '/static/images/iconZhongXin.png',
					'中国民生银行': '/static/images/iconMingSheng.png',
					'中国光大银行': '/static/images/iconGuangDa.png',
					'平安银行': '/static/images/iconPingAn.png',
					'华夏银行': '/static/images/iconHuaXia.png',
					'添加新卡': '/static/images/iconXinKa.png'
				}


			};
		},
		created() {
			console.log(this.list, 'kkkkkkkkkkkkkkkkkkkkk');
		},
		methods: {
			open() {
				console.log('打开弹出层');
			},
			/**
			 * 关闭弹窗
			 */
			close2() {
				this.$emit('close')
				// console.log('close');
			},

			/**
			 * 切换选项
			 */
			switchSelect(val) {
				this.listData.forEach((res, index) => {
					if(res.id === val.id){
						// 如果是新增卡,那就进入新增页面
						if (res.type) {
							this.addCard()
							return
						}
						
						this.listData[index].status = true
					}else{
						this.listData[index].status = false
					}
					
				})
				
				
				this.$emit('close')
			},

			/**
			 * 新增银行卡
			 */
			addCard() {
				console.log('点击新增银行卡');
				uni.navigateTo({
					url: '/pages/wallet/index'
				});

			},



			//滑动区域
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

			/**
			 * 初始化listData
			 */
			initListData() {
				this.listData.forEach((res, index) => {
					if (res.id === this.selectCar.id) {
						this.listData[index].status = true
					}
				})
			},
		},
		watch: {
			//监听传入的银行卡list，并格式化
			'list': function(e) {
				this.listData = []
				this.listData = this.list.map(res => ({
					id: res.id,
					bankName: res.bankName, // 银行名称
					accountNo:res.accountNo, // 账号
					accountType:res.accountType, // 账号类型
					openBankName:res.openBankName ,// 开户行名称
					accountName:res.accountName, // 真名，账户名
					status: false,
					type: false
					// footNum: res.accountNo.length>4?res.accountNo.slice(res.accountNo.length-4,res.accountNo.length):res.accountNo, // 账号末尾几位
				}))

				this.listData.push({
					id: 'last',
					bankName: '添加新卡',
					type: true
				})
			},

			// 监听传入的选中item，将对应的itme的状态改成true
			'selectCar': {
				handler(newVal, oldVal) {
					if (this.listData) {
						this.initListData() //初始化listData
					}
				},
				deep: true, // 深度监听
			},

			//监听列表数据，将status是true的放入选中
			'listData': {
				handler() {
					// 筛选选中的值
					let s1 = this.listData.find(res => res.status === true)
					console.log(s1, 'kl222');


					if (!s1) {
						this.initListData() //初始化listData
						return
					}
					let s2 = this.list.find(res => res.id === s1.id)
					if (s2) {
						this.$emit("setSelectCar", s2)
					} else {
						uni.showToast({
							title: '没有绑定当前银行卡',
							duration: 2000,
							icon:'none'
						});

						this.listData.forEach((res, index) => {
							if (res.id === this.selectCar.id) {
								this.listData[index].status = true
							} else {
								this.listData[index].status = false
							}
						})


						console.log(this.selectCar, 'kkkkkkl66666666');
					}
				},
				deep: true
			}



		}
	}
</script>

<style lang="less">
	.popList {
		.content {
			height: 60vh;

			.title {
				#flex(-, center, center);
				height: 100rpx;
				margin: 0 32rpx;
				border-bottom: 2rpx solid #EAE9E9;
				box-sizing: border-box;
			}

			.scroll-Y {
				height: calc(60vh - 100rpx);
			}

			.list-content {
				#padding(28rpx 0 72rpx 0);

				.item {
					#flex(-, space-between, center);
					height: 92rpx;
					margin: 0 32rpx;
					box-sizing: border-box;

					&:not(:last-child) {
						border-bottom: 2rpx solid #EAE9E9;
					}

					.item-left {
						#flex(-, center, center);

						.item-left-image {
							#box(32rpx);
						}

						.item-left-text {
							margin-left: 32rpx;
							#font(28rpx, @font-title-color);
						}
					}

					.item-right {
						.item-right-image {
							#box(32rpx);
						}
					}
				}
			}
		}
	}
</style>